<template>
  <div class="container">
     
    
    <div class="chat-list">
      <div class="header">聊天记录页面</div>
      <div 
        v-for="chat in chatList" 
        :key="chat.roomId"
        class="chat-item"
        @click="openChat(chat)"
      >
        <div class="chat-info">
          <div class="name">{{ chat.senderType === 'doctor' ? '医生' : '患者' }}</div>
          <div class="last-message">{{ chat.content }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 聊天记录列表
const chatList = ref([
  {
    roomId: '123',
    senderId: 'd111',
    senderType: 'doctor',
    content: '你是医生'
  },
  {
    roomId: '123', 
    senderId: 'p111',
    senderType: 'patient',
    content: '你是患者'
  },
 
]);

/**
 * 打开聊天窗口
 * @param chat - 聊天记录对象
 */
function openChat(chat: any) {
  router.push({
    path: '/swindow',
    query: {
      roomId: chat.roomId,
      senderId: chat.senderId,
      senderType: chat.senderType
    }
  });
}
</script>

<style scoped>
.chat-list {
  padding: 16px;
}
.header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
}
.chat-item {
  padding: 12px;
  border: 1px solid #eee;
  margin-bottom: 8px;
  cursor: pointer;
  border-radius: 4px;
}
.chat-item:hover {
  background: #f5f5f5;
}
.name {
  font-weight: bold;
  margin-bottom: 4px;
}
.last-message {
  color: #666;
  font-size: 14px;
}
</style>
